<template>
  <div style="margin-bottom:50px">
   <mt-header title="购物车">
      <div slot="left">
        <mt-button @click="goBack" icon="back">返回</mt-button>
      </div>
    </mt-header>
     <div class="warp warptwo clear clearfloat">
	    	<div class="shopcar clear clearfloat">
	    		<div class="list clear fl clearfloat" 
                v-for="(i,index) in list">
	    			<div class="xuan clear fl clearfloat">
	    				<div class="radio" > 
						    <label>
						        <input type="checkbox" name="sex" 
                                :value="index" v-model="checked"/>
						    </label>
						</div>
	    			</div>
	    			<a href="javascript:void(0)">
		    			<div class="tu clearfloat fl">
		    				<span></span>
		    				<img :src="require('../assets/img/xj.jpg')"/>
		    			</div>
		    			<div class="right clearfloat fl">
		    				<p class="tit over">{{i.title}}}</p>
		    				<p class="fu-tit over">颜色：蓝色  内存：120G</p>
		    				<p class="jifen over">{{i.price*i.count}}积分</p>
		    				<div class="bottom clearfloat">
		    					<div class="zuo clearfloat fl">
		    						<ul>
		    							<li @click="substrict(index)"><img :src="require('../assets/img/jian.jpg')"/></li>
		    							<li>{{i.count}}</li>
		    							<li @click="add(index)"><img :src="require('../assets/img/jia.jpg')"/></li>
		    						</ul>
		    					</div>
		    					<i class="mui-icon mui-icon-trash fr"></i>
		    				</div>
		    			</div>
	    			</a>
	    		</div>
                
	    	</div>
            
	    </div>
        <!-- 底部定位 -->
        <div class="settlement clearfloat">
	    	<div class="zuo clearfloat fl box-s">
	    		合计：<span>{{total}}积分</span>
	    	</div>
	    	<router-link to=""  class="fl db" @click.native="jiazai">
	    		立即结算
	    	</router-link>
	    </div>

  </div>
</template>
<script>
import { Indicator } from 'mint-ui';
  export default{
    computed:{
        
      },
    data:function(){
      return {
        totalPrice1:[],
       checked:[],
       list:[
           {
               "count":1,
               "id":1,
               "title":"单反相机，彰显你的风格",
               "price":10000
           },
           {
               "count":1,
               "id":2,
               "title":"单反相机，彰显你的风格",
               "price":10000
           },
           {
               "count":1,
               "id":3,
               "title":"单反相机，彰显你的风格",
               "price":10000
           },
           {
               "count":1,
               "id":4,
               "title":"单反相机，彰显你的风格",
               "price":10000
           },
           {
               "count":1,
               "id":5,
               "title":"单反相机，彰显你的风格",
               "price":10000
           }
       ]
      }
    },
    computed:{
        total:function(){
            var total=0;
            for(var i=0,len=this.checked.length;i<len;i++){
                var index=this.checked[i];
                var item=this.list[index];
                if(item){
                    total+=item.price*item.count;
                }else{
                    continue;
                }
            }
            return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
        }
    },
    methods:{
    jiazai(){
       Indicator.open('加载中...')
       setTimeout(()=>{
         Indicator.close();
         this.$router.push('/confirm')
       },300)
     },
      goBack(){
       this.$router.go(-1);
     },
     substrict(index){
         this.list[index].count--;
         if(this.list[index].count<1){
             this.list[index].count=1;
         }
     },
     add(index){
         this.list[index].count++;
     } 
     
    }
  }
</script>
<style scoped>
header p {
    font-size: 7px;
    margin-top: 0.7px;
}
.shopcar {
    width: 100%;
}

.shopcar .list {
    width: 100%;
    height: 125px;
    background-color: #fff;
    margin-bottom: 3%;
    padding: 7px 3px;
}

.shopcar .list .xuan {
    width: 11px;
    height: 11px;
    margin-top: 37px;
}

label {
    width: 100%;
    display: block;
    position: relative;
    font-weight: normal;
    left: 5px;
}

.radio input[type="checkbox"] {
    display: inline-block;
    margin-right: 15px;
    width: 14px;
    height: 14px;
}

.radio input[type="radio"] {
    display: inline-block;
    margin-right: 15px;
    opacity: 0;
}

.shopcar .list .tu {
    width: 102px;
    height: 102px;
    font-size: 0;
    border: 1px solid #e2e2e2;
    text-align: center;
    margin-left:14px;
}

.shopcar .list .tu span {
    display: inline-block;
    height: 100%;
    line-height: 0;
    vertical-align: middle;
}

.shopcar .list .tu img {
    max-width: 100%;
}

.shopcar .list .right {
    height: 42px;
    width: 57%;
    margin-left: 2%;
}

.shopcar .list .right .tit {
    color: #333333;
    font-size: 16px;
    line-height: 16px;
}

.shopcar .list .right .fu-tit {
    color: #999999;
    font-size: 5px;
}

.shopcar .list .right .jifen {
    font-size: 7px;
    color: #f44623;
    margin-top: 3px;
}

.shopcar .list .right .bottom {
    width: 100%;
    margin-top: 3px;
}

.shopcar .list .right .bottom .zuo ul li {
    float: left;
    color: #333;
    font-size: 16px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}

.shopcar .list .right .bottom .zuo ul li img {
    width: 100%;
}

.shopcar .list .right .bottom i {
    line-height: 20px;
    color: #9e9e9e;
    font-size: 20px;
}

.settlement {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 50px;
    border-top: 1px solid #f4f4f4;
    background-color: #fff;
}

.settlement .zuo {
    width: 60%;
    height: 50px;
    line-height: 40px;
    padding: 7px;
    font-size: 18px;
    color: #666666;
}

.settlement .zuo span {
    color: #ff4141;
}

.settlement a {
    width: 40%;
    height: 50px;
    line-height: 50px;
    background-color: #f44623;
    font-size: 14px;
    color: #fff;
    text-align: center;
}
.tu img {
    padding-top: 17px;
}

</style>




